<template>
  <div class="businessWeight">
    <div class="busWeiSech">
      <!-- 商品管理弹出框 -->
      <el-dialog
        title="商户管理"
        :visible.sync="dialogFormVisible"
        v-if="dialogFormVisible"
        :key="timer"
        width="30%"
      >
        <el-form :model="form" :rules="rules" ref="form" class="dialogform">
          <el-form-item label="商户" :label-width="formLabelWidth" :class="{ showactive: !isActive }" prop="businessId">
            <my-select
              ref="mySelectBusiness"
              url="api/v1/backend/public/business"
              @selected="mySelectedBusiness"
            ></my-select>
          </el-form-item>
          <el-form-item label="商户" :label-width="formLabelWidth" :class="{ showactive: isActive }">
            <el-input
              v-model="businessName"
              :disabled="true"
              style="width:60%"
              :placeholder="businessName"
            ></el-input>
          </el-form-item>
          <el-form-item label="权重值" :label-width="formLabelWidth" prop="subOrderWeight">
            <el-input-number v-model="form.subOrderWeight" label="权重值"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;quxiao()">取 消</el-button>
          <el-button
            type="success"
            @click="submitEdit('form')"
            :class="{ showactive: isActive }"
          >编 辑</el-button>
          <el-button
            type="primary"
            @click="handleAdd('form')"
            :class="{ showactive: !isActive }"
          >添 加</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-col :span="20">
          <div class="busWeiSechSec">
            查询:
            <el-input
              v-model="searchName"
              style="width: 22%;margin-right:10px"
              placeholder="请输入商户名称、商品摊位名称"
              clearable
            ></el-input>
            <el-button
              class="button"
              round icon="el-icon-search"
              size="small"
              @click="seachbtn()"
              style="margin-left:40px;font-size:14px"
            >查 询</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button
          class="button"
          round
            size="small"
            @click="dialogFormVisible = true;isActive=true;addbtn()"
            style="margin-left:40px;font-size:14px;"
          >添 加</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="busWeiTab">
      <!-- 商品列表 -->

      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="商户名称" prop="businessName"></el-table-column>
        <el-table-column label="商户摊位名称" prop="stallName"></el-table-column>
        <el-table-column label="权重" prop="subOrderWeight"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row);dialogFormVisible = true"
            >
              <span style="color:#3dc2c2;font-size:14px" @click="isActive=false">编辑</span>
            </el-button>

            <el-button size="mini" type="text" @click="handledel(scope.$index, scope.row);open()">
              <span style="color:#f7674a;font-size:14px">删除</span>
            </el-button>
            <el-button size="mini" @click="productList(scope.row)" type="text" style="color:#3dc2c2;">产品列表</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
        </div>
      </el-table>
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page1"
        :page-sizes="pageSizes1"
        :page-size="perPage1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount1"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import MySelect from "./select";
export default {
  name: "productMsg",
  components: {
    MySelect
  },
  data() {
    var checkWeight = (rule, value, callback) => {
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 0 || value > 10) {
            callback(new Error("权重范围是0-10"));
          } else {
            callback();
          }
        }
      }, 300);
    };

    return {
      searchName: "",
      tableData: [],
      businessList: [],
      form: {
        businessId: "",
        subOrderWeight: 0
      },
      perPage1: 10, // 每页显示10条
      page1: 1, // 当前页
      pageSizes1: [1, 5, 10, 20],
      totalCount1: 20, // 总条数
      id: "",
      Weight: "",
      dialogFormVisible: false,
      // dialogImageUrl: '',
      formLabelWidth: "140px",
      timer: "",
      isActive: false,
      disabled: false,
      businessName: "",
      loading: true,
      value: 0,
      rules: {
        subOrderWeight: [{ validator: checkWeight, trigger: "blur" }],
        businessId: [
            { required: true, message: '请选择商户', trigger: 'change' }
          ],
      }
    };
  },
  created() {},
  mounted() {
    // this.Weight = this.form.subOrderWeight;
    this.getBusWeiList();
  },
  methods: {
    // 点击 产品列表
    productList(row){
      console.log(row)
      const businessId = row.businessId
      const businessName = row.businessName
      const stallName = row.stallName
      this.$router.push({
        path: `businessPro/${businessId}`,
        query: {
          businessId: businessId,
          businessName: businessName,
          stallName: stallName
        }
      })
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.form = row;
      this.disabled = true;
      this.businessName = row.businessName;
    },
    quxiao(){
      this.getBusWeiList();
    },
    open() {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store
            .dispatch("businessWeight/getBusWeiDel", {
              id: this.id
            })
            .then(data => {
              // console.log(data);
              if ((this.totalCount1 - 1) % this.perPage1 == 0) this.page1--;
              this.getBusWeiList();
            })
            .catch(err => {
              // console.log(err);
            });

          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handledel(index, row) {
      // console.log(index, row);
      this.id = row.id;
    },

    seachbtn() {
      this.getBusWeiList();
    },
    submitEdit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$store
            .dispatch("businessWeight/getBusWeiEdit", this.form)
            .then(res => {
              // console.log(res);
              if (res) {
                // console.log(res+"111111");
                this.getBusWeiList();
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
                this.dialogFormVisible = false;
              } else if (res == undefined) {
                this.dialogFormVisible = true;
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    addbtn() {
      this.form.businessId = "";
      this.form.subOrderWeight = "0";
      this.disabled = false;
    },
    handleAdd(form) {
      // console.log(this.form.subOrderWeight);
       this.$refs[form].validate(valid => {
        if (valid) {
      this.$store
        .dispatch("businessWeight/getBusWeiAdd", {
          businessId: this.form.businessId,
          subOrderWeight: this.form.subOrderWeight * 1
        })
        .then(res => {
          // console.log(res);
          if (res) {
            this.getBusWeiList();
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.dialogFormVisible = false;
            this.timer = new Date().getTime();
          } else if (res == undefined) {
            this.dialogFormVisible = true;
            //  console.log(res+"111111");
            //  this.$message.error("添加失败");
          }
        })
        .catch(err => {
          console.log(err);
          // console.log(res)
          // console.log(11111);
        });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // handleChange(currentValue) {
    //   console.log(currentValue);
    // },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.loading = false;
      this.perPage1 = val;
      this.page1 = 1;
      this.getBusWeiList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.loading = false;
      this.page1 = val;
      this.getBusWeiList();
    },
    getBusWeiList() {
      this.$store
        .dispatch("businessWeight/getBusWeiList", {
          searchName: this.searchName,
          perPage: this.perPage1,
          page: this.page1
        })
        .then(data => {
          // console.log(data);
          this.loading = false;
          this.tableData = data.items;
          this.totalCount1 = data.total;
        })
        .catch(err => {
          console.log(err);
        });
      this.loading = true;
    },

    // 选择商户 商户信息
    mySelectedBusiness(obj) {
      // console.log(obj);
      this.form.businessId = obj.exData.id;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-form-item {
  margin-bottom: 5px;
}
.dialogform ::v-deep .el-form-item {
  margin-bottom: 16px;
}
.busWeiSech {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.busWeiTab {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
  padding-top: 15px;
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  // margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.showactive {
  display: none;
}
.busWeiSechSec ::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
}
::v-deep .el-input-number {
  width: 60%;
}
.button {
    background: #64d9d6;
    color: #fff;
  }
</style>
